import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {AtGrid,AtButton,AtTag} from 'taro-ui'
import './suifangHuanzheLieBiao.scss'
// import reactMixin from 'react-mixin';
// import myJs from './suifangHuanzheLieBiaoJs.js'
import app from '../../../../main.js'

export default class SuifangHuanzheLieBiao extends Component {
    config = {
        navigationBarTitleText: '随访患者列表'
    }
    constructor () { 
        super(...arguments); 
        this.state={
            search:'',
            current:8,
            show:false,
            show2:false,
            // 当月患者列表
            patientList:[],
            // 患者数量
            patientCount:0
        }
    }
    init(){
       let province_select=[];
       for(let i=0;i<34;i++){
        province_select.push(false);
       }
    }

    go=(itme,index)=>{
        switch(index){
            case 0:app.navigateTo('../tianjiahuanzhe/tianjiahuanzhe');
            break;
            case 1:app.navigateTo('../patientlist/patientlist');
            break;
            case 2:app.navigateTo('../labelmanage/labelmanage');
            break;
            case 3:app.navigateTo('../suifangjihua/suifangjihua');
            break;
            case 4://app.navigateTo('../suifanrili/suifanrili');
            app.toast('暂未开通，敬请期待');
            break;
            case 5://app.navigateTo('../xuanzeshouxinren/xuanzeshouxinren');
            app.toast('暂未开通，敬请期待');
            break;
        }
    }
    checkPatient=()=>{
        app.redirectTo('../suifangjihua/suifangjihua?page=chakanbingli');
    }

    offset = 0
    length = 20
    total = 0

    onReachBottom(){
        if((this.offset + this.length) < this.total){
            app.toast('正在加载')
            this.offset = this.offset + this.length
            this.getData()
        }else{
            app.toast('没有更多数据咯')
        }
    }
    // 患者列表
    getData(){
        let me = this
        let data={offset:this.offset,length:this.length}
        let dataArray = [],filterArray = [],filter = {}
        app.get('web/patient/current_month_patients',data,function(res){
            dataArray = me.state.patientList.concat(res.data.result.list)
            dataArray.map(item=>{
                if (!filter[item.id]) {
                    filter[item.id] = 1
                    filterArray.push(item)
                }
            })
            me.total = filterArray.length
            me.setState({
                patientList:filterArray,
                patientCount: filterArray.length
            })
        })
    }

    componentDidShow(){
        this.setState({
            patientList: []
        });
        this.getData()
    }

    navigateTo(url) {
        app.navigateTo(url);
    }

    render () {
        // 当月患者列表
        let patientLists = this.state.patientList.map((itme)=>{
            return  <View className='patient'>
                        <Image 
                            className='head' 
                            src={app.getPath(itme.head_image)}
                        >
                        </Image>
                        <View className='info' onClick={this.navigateTo.bind(this, '../patientdetails/patientdetails?id='+itme.id)}>
                            <View className='top'>
                                {itme.name}
                                <Text className='more-info'>{itme.gender}  {itme.age}岁</Text>
                            </View>
                            <View className='bottom'>
                                {
                                    itme.labels.map((name) => {
                                        return <AtTag className='tag'>{name}</AtTag>
                                    })
                                }
                            </View>
                        </View>
                        {itme.flow_status.id == 0 
                        ? <AtButton className='btn' type='primary' onClick={this.navigateTo.bind(this,'../suifangjihua/suifangjihua?patient_id='+itme.id+'&from_page=flow')}>{itme.flow_status.name}</AtButton>
                        : <AtButton className='btn' type='primary' onClick={this.navigateTo.bind(this,'../suifangjihuaxiangqing/suifangjihuaxiangqing?id='+itme.flow_status.id)}>{itme.flow_status.name}</AtButton>
                        }                     
                    </View>
        }) 


        return (
            <View className='suifangHuanzheLieBiao'>
                <AtGrid 
                    onClick={this.go} 
                    data={[
                        {image:app.imageUri+'img/haoyoushenqing.png',value:'添加患者'},
                        {image:app.imageUri+'img/haoyoushenqing.png',value:'全部患者'},
                        {image:app.imageUri+'img/biaoqian.png',value:'患者标签'},
                        {image:app.imageUri+'img/shu.png',value:'随访计划'},
                        {image:app.imageUri+'img/rili.png',value:'随访日历'},
                        {image:app.imageUri+'img/qunfaxinxi.png',value:'群发通知'}
                    ]} 
                    className=' class_1'
                >
                </AtGrid>
                <View className='patients-num'>最新患者（{this.state.patientCount}人）</View>
                <View className='patient-list'>
                {/* 患者列表 */}
                {patientLists}   
                </View>
            </View>
        );
    }
}
// reactMixin.onClass(SuifangHuanzheLieBiao,myJs);